<template>
  <div>
    <van-button
      v-if="value"
      class="follow-btn"
      round
      size="small"
      @click="delFollow"
      :loading="isFollowLoading"
      >已关注</van-button
    >
    <van-button
      v-else
      class="follow-btn"
      type="info"
      color="#3296fa"
      round
      size="small"
      icon="plus"
      @click="addFollow"
      :loading="isFollowLoading"
      >关注</van-button
    >
  </div>
</template>
<script>
import { addFollow, deleteFollow } from '@/api/user'
export default {
  props: ['value', 'user_id'],
  created() {},
  computed: {},
  data() {
    return { isFollowLoading: false }
  },
  methods: {
    async addFollow() {
      this.isFollowLoading = true

      try {
        await addFollow(this.user_id)
        this.$emit('input', !this.value)
        this.$toast('关注成功')
        this.isFollowLoading = false
      } catch (error) {
        this.isFollowLoading = false
        this.$toast('关注失败，请稍后重试')
      }
    },
    async delFollow() {
      this.isFollowLoading = true
      try {
        await deleteFollow(this.user_id)
        this.$emit('input', !this.value)
        this.$toast('已取消关注')
        this.isFollowLoading = false
      } catch (error) {
        console.log(error)
        this.isFollowLoading = false
        this.$toast('取消失败，请稍后重试')
      }
    }
  }
}
</script>
<style lang="less" scoped></style>
